<extend name="common" />
<block name="main">
<div class="bd add-member">
    <div class="panel clearfix">
        <div class="col-lg-4 pull-left select-user">
            <div class="input-group" id="select_user">
                <input type="text" class="form-control" id="selected_user" readonly placeholder="查找用户">
                <span class="input-group-addon"><i class="glyphicon glyphicon-chevron-down"></i></span>
                <!-- <input type="text" id="username" class="form-control" data-provide="typeahead" autocomplete="off" placeholder="查找用户"> -->
            </div>
            <div class="dropdown-menu col-lg-12 search-userlist" style="padding:0;">
                <input type="text" class="form-control" id="username" placeholder="请输入关键字" autocomplete="off"><i class="glyphicon glyphicon-search user-search-icon"></i>
            </div>
        </div>
        <form method="post" class="form-horizontal" action="{:U('Home/Project/addMember')}">
            <input type="hidden" name="pid" value="{$project_id}">
            <input type="hidden" id="user_id" name="user_id">
            <div class="col-lg-3">
                <select class="form-control col-lg-10" style="width:80%" name="auth">
                    <option value="dev">开发权限</option>
                    <option value="admin">完全权限</option>
                    <option value="tour">查看权限</option>
                </select>
                <a href="#" class="glyphicon glyphicon-question-sign auth-help" data-toggle="tooltip" data-placement="bottom" title="完全权限等同于项目创建者;开发权限可对分组和接口进行增删改查;查看权限仅可查看相关内容">
                </a>
            </div>
            <div class="col-lg-1">
                <button type="submit" class="btn btn-primary btn-submit col-lg-10">添加</button>
            </div>
        </form>
    </div>
    <div class="panel panel-info member-list clearfix">
        <div class="panel-heading">
            <h3 class="panel-title">成员</h3>
        </div>
        <table class="table">
            <tbody>
                <foreach name="members" item="member">
                <tr class="params-row">
                    <td>
                        <img src="__ROOT__/{$member.headurl|default='public/images/default_head.png'}" class="img-circle" width="40" height="40"><a href="javascript:;" class="user-name">{$member.username}</a>
                        <if condition="$member['user_id'] eq $login_user['user_id']">
                        <span class="label label-info user-tag">你自己</span>
                        </if>
                        <switch name="member.auth" >
                        <case value="tour" break="1"><span class="label label-info user-tag">游客</span></case>
                        <case value="dev" break="1"><span class="label label-info user-tag">开发人员</span></case>
                        <case value="owner" break="0"><span class="label label-info user-tag">项目拥有者</span></case>
                        <case value="admin" break="1"><span class="label label-info user-tag">管理员</span></case>
                        </switch>
                    </td>
                    <td class="col-lg-3">
                        <if condition="$member['auth'] neq owner">
                        <if condition="$member['user_id'] neq $login_user['user_id']">
                        <a class="btn btn-xs btn-success btn-test" href="javascript:;" onclick="editAuth({$member['user_id']},'{$member['auth']}')"><i class="glyphicon glyphicon-paperclip"></i>&nbsp;修改权限</a>
                        </if>
                        <if condition="$self_auth eq 'owner'">
                        <a class="btn btn-xs  btn-warning btn-detail" href="javascript:;" onclick="handProject({$member['user_id']})"><i class="glyphicon glyphicon-eye-open"></i>&nbsp;移交项目</a>
                        </if>
                        </if>
                        <if condition="($member['user_id'] eq $login_user['user_id']) AND ($member['auth'] neq owner)">
                        <a class="btn btn-xs btn-danger btn-delete" href="javascript:;" onclick="removeUser({$member['user_id']})"><i class="glyphicon glyphicon-remove"></i>&nbsp;&nbsp;退出项目</a>
                        <elseif condition="$member['auth'] eq owner"/>
                        <else />
                        <a class="btn btn-xs btn-danger btn-delete" href="javascript:;" onclick="removeUser({$member['user_id']})"><i class="glyphicon glyphicon-remove"></i>&nbsp;&nbsp;移除成员</a>
                        </if>
                    </td>
                </tr>
                </foreach>
            </tbody>
        </table>
    </div>
</div>

<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title" id="myModalLabel">修改权限</h4>
            </div>
            <form id="authForm" method="post" class="form-horizontal" action="{:U('Home/Project/editAuth')}">
                <input type="hidden" name="pid" value="{$project_id}">
                <input type="hidden" id="edit_userid" name="uid" value="">
                <div class="modal-body clearfix">
                    <div class="form-group">
                        <label class="col-lg-2 control-label">选择权限</label>
                        <div class="col-lg-10">
                            <select class="form-control col-lg-10" name="edit_auth" id="edit_auth">
                                <option value="dev">开发权限</option>
                                <option value="admin">完全权限</option>
                                <option value="tour">查看权限</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary btn-submit">提交</button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<!-- /.modal -->
<style>
.typeahead.dropdown-menu{
    width: 100%;
}
.user-search-icon{
    position: absolute;
}
.select-user{
    padding-left: 0;
    padding-right: 0;
    margin-right: 15px;
}
.user-search-icon{
    height: 34px;
    display: block;
    position: absolute;
    right: 0;
    font-size: 20px;
    padding: 6px;
    color: #999;
}
.auth-help{
    line-height: 34px;
    height: 34px;
    font-size: 16px;
    color: #333;
    margin-left: 5px;
}
</style>
<script>
$(function(){
    $("[data-toggle='tooltip']").tooltip();

    $('body').click(function(){
        if($('.search-userlist').hasClass("show")){
            $('.search-userlist').removeClass("show");
        }
    })

    $('#select_user').click(function(){
        $(this).next('.dropdown-menu').toggleClass("show");
        $('#username').val('');
        return false;
    })

    $('#username').click(function(){
        return false;
    })

    $('#username').typeahead({
        source: function(query, process) {
            var url = "{:U('Home/Base/typeaheadData')}";
            $.post(url,{keyword:$('#username').val()},function(rs){
                var resultList = rs.map(function (item) {
                    var aItem = { id: item.user_id, name: item.username };
                    return JSON.stringify(aItem);
                });            
                return process(resultList);  
            })
        },

        matcher: function (obj) {
            var item = JSON.parse(obj);
            return ~item.name.toLowerCase().indexOf(this.query.toLowerCase())
        },

        sorter: function (items) {          
            var beginswith = [], caseSensitive = [], caseInsensitive = [], item;
            while (aItem = items.shift()) {
                var item = JSON.parse(aItem);
                if (!item.name.toLowerCase().indexOf(this.query.toLowerCase()))     
                    beginswith.push(JSON.stringify(item));
                else if (~item.name.indexOf(this.query)) caseSensitive.push(JSON.stringify(item));
                else caseInsensitive.push(JSON.stringify(item));
            }

            return beginswith.concat(caseSensitive, caseInsensitive)

        },

        highlighter: function (obj) {
            var item = JSON.parse(obj);
            var query = this.query.replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
            return item.name.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
                return '<strong>' + match + '</strong>'
            })
        },

        updater: function (obj) {
            var item = JSON.parse(obj);
            $('#user_id').attr('value', item.id);
            $('#selected_user').attr('value', item.name);
            return item.name;
        }
    });
})

function removeUser(user_id){
    if(confirm('确定要这么做吗')){
        var url = '{:U("Home/Project/removeMember")}';
        $.post(url,{pid:{$project_id},uid:user_id},function(rs){
            if(rs.success){
                showMessage('success',rs.msg,rs.url);
            }
            else{
                showMessage('erroe',rs.msg,rs.url);
            }
        })
    }
}

function editAuth(user_id,auth){
    $('#edit_userid').val(user_id);
    $('#edit_auth').val(auth);
    $('#myModal').modal('show');
}

function handProject(user_id){
    if(confirm('确定要这么做吗')){
        var url = '{:U("Home/Project/handProject")}';
        $.post(url,{pid:{$project_id},uid:user_id},function(rs){
            if(rs.success){
                showMessage('success',rs.msg,rs.url);
            }
            else{
                showMessage('erroe',rs.msg,rs.url);
            }
        })
    }
}
</script>
</block>